<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    主题样式-->
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/bootstrap/easyui.css">
    <!-- 配置圖片样式-->
    <link rel="stylesheet" type="text/css" href="../jeasyui/themes/icon.css">
    <!--    引入jquery环境-->
    <script type="text/javascript" src="../jeasyui/jquery.min.js"></script>
    <!--    引入easyui.min.js环境-->
    <script type="text/javascript" src="../jeasyui/jquery.easyui.min.js"></script>
    <!--    引入汉化包-->
    <script type="text/javascript" src="../jeasyui/easyui-lang-zh_CN.js"></script>
    <script>
        $(function () {
            //更新事件
            $("#btn-edit").click(function () {
                let array = $("#dg").datagrid('getSelections');
                if (array.length == 0) {
                    $.messager.alert('消息', '请选择要修改的数据', 'error');
                } else if (array.length > 1) {
                    $.messager.alert('消息', '只能选择一条记录进行修改', 'error')
                } else {
                    //填充修改的表单
                    $("#edit-form").form('load', {
                        cateid: array[0].cateid,
                        catename: array[0].catename
                    })
                    //弹出修改对话框
                    $("#edit-dialog").dialog({
                        closed: false,//显示修改对话框
                        buttons: [{
                            text: '保存',
                            iconCls: 'icon-save',
                            handler: function () {
                                $("#edit-form").form('submit', {
                                    url: '../category/updateCategory',
                                    onSubmit: function () {
                                        return $("#edit-form").form('validate');
                                    },
                                    success: function (flag) {
                                        if (flag) {
                                            $("#edit-dialog").dialog({closed: true});
                                            $("#dg").datagrid('load');
                                            $.messager.show({
                                                title: '消息',
                                                msg: '修改成功',
                                                timeout: 5000,
                                                showType: 'slide'
                                            });

                                        }
                                    }
                                })
                            }
                        }]
                    })

                }
            })
            //删除事件
            $("#btn-remove").click(function () {
                let array = $("#dg").datagrid('getSelections');
                if (array.length == 0) {
                    $.messager.alert('信息', '请选择要删除的数据', 'error');
                } else {
                    let cids = [];//定义数组，存储删除类型的Id
                    for (let i in array) {
                        cids.push(array[i].cateid)
                    }
                    $.post('../category/removeBatchCategory', {"cids[]": cids},
                        function (flag) {
                            if (flag) {
                                $("#dg").datagrid('load');//刷新表格
                                $.messager.show({
                                    title: '消息',
                                    msg: '删除成功',
                                    timeout: 5000,
                                    showType: 'slide'
                                });
                            }
                        })

                }
            })
            //添加按钮添加点击事件
            $("#btn-add").click(function () {
                $("#add-dialog").dialog({
                    closed: false,//显示对话框
                    buttons: [{
                        text: '保存',
                        iconCls: 'icon-save',
                        handler: function () {
                            $("#add-form").form('submit', {
                                url: '../category/saveCategory',
                                onSubmit: function () {
                                    return $("#add-form").form('validate');
                                },
                                success: function (flag) {
                                    if (flag) {
                                        $("#add-dialog").dialog({closed: true});//关闭对话框
                                        $("#dg").datagrid('load');//刷新表格
                                        $.messager.show({
                                            title: '消息',
                                            msg: '添加成功',
                                            timeout: 5000,
                                            showType: 'slide'
                                        });
                                    }

                                }
                            })
                        }
                    }, {
                        text: '重置',
                        iconCls: 'icon-redo',
                        handler: function () {
                            alert('点击了重置按钮')
                        }
                    }]
                })
            })

            //条件查询
            $("#but-search").click(function () {
                $("#dg").datagrid('load', {
                    cateName: $("#cateName").val()
                })
            })
            $("#dg").datagrid({
                url: '../category/listPage',
                fit: true,//让表格铺面父容器
                fitColumns: true,//让列评价分配，防止出现水平滚动条
                pagination: true,//显示分页工具栏
                pagePosition: 'both',//设置分页工具栏显示位置
                toolbar: '#tb',
                columns: [[
                    {field: 'cateid', title: '类别ID', width: 100, checkbox: true},
                    {field: 'catename', title: '类别名称', width: 100},
                    {field: 'ctime', title: '创建时间', width: 100},
                    {field: 'mtime', title: '修改时间', width: 100}
                ]]
            })
        })

    </script>
</head>
<body>
<div id="tb">
    <table>
        <tr>
            <td>
                <input id="cateName" placeholder="请输入类别名称查询">
                <a href="#" class="easyui-linkbutton" plain="true"
                   iconCls="icon-search" id="but-search">查询</a>
            </td>
        </tr>
    </table>
    <a href="#" id="btn-add" class="easyui-linkbutton" plain="true" iconCls="icon-add">添加</a>
    <a href="#" id="btn-edit" class="easyui-linkbutton" plain="true" iconCls="icon-edit">修改</a>
    <a href="#" id="btn-remove" class="easyui-linkbutton" plain="true" iconCls="icon-remove">删除</a>
</div>
<div id="dg"></div>
<!--定义添加对话框-->
<div id="add-dialog" class="easyui-dialog" closed="true" title="添加类别"
     style="width: auto;height: auto">
    <form id="add-form" method="post">
        <table>
            <tr>
                <td>
                    <input name="catename" class="easyui-validatebox"
                           data-options="required:true">

                </td>
            </tr>
        </table>
    </form>
</div>

<!--修改对话框-->
<div id="edit-dialog" class="easyui-dialog" closed="true" title="修改类别"
     style="width: auto;height: auto">
    <form id="edit-form" method="post">
        <table>
            <tr>
                <td>
                    <!--                    隐藏控件，填充修改的ID-->
                    <input type="hidden" name="cateid">
                    <input name="catename" class="easyui-validatebox"
                           data-options="required:true">

                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>